<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Static Master/Detail Pattern -- Search Results example, using a store with save, commit and reset</title>

		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" djConfig="parseOnLoad:0,isDebug:1,async:1" src="../../../../dojo/dojo.js"></script>
		<script type="text/javascript">
		var results, selectedIndex = 0;
 
		require([
			'dojo/_base/kernel',
			'dojo/parser',
			'dojox/mvc',
			'dojo/data/ItemFileWriteStore',
			'dojo/store/DataStore',
			'dijit/form/TextBox',
			'dijit/form/Button',
			'dojox/mvc/Repeat',
			'dojox/mvc/Group',
			'dojox/mvc/Output'
			], function(kernel, parser, mvc, ItemFileWriteStore, DataStore){
				var writeStore = new ItemFileWriteStore({url: kernel.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
				var modelPromise = mvc.newStatefulModel({store: new DataStore({store: writeStore})}); 
				modelPromise.then(function(model){ 
					results = model;
					parser.parse();
				});
			});

			// called to change the selected item
			function setDetailsContext(index) {
				selectedIndex = index;
				var widget = dijit.byId("detailsGroup");
				widget.set("ref", index);
			};
        </script>
	</head>
	<body class="claro" style="background-image: url(images/master_detail.png)">
		<div id="wrapper">
			<div id="header">
				<div id="navigation">
				</div>
				<div id="headerInsert">
				<h2>Master Detail Example - With repeat container, using a store, with save, commit and reset.</h2>
				</div>
			</div>
			<div id="main">
				<div id="leftNav">
				</div>
				<div id="mainContent">
					<div id="searchBanner">Search Results for term: </div>         
					<!--
						The repeat container denotes a templated UI that operates over a collection
						of data records.
						The UI can be customized for each iteration using properties such as
						${this.index} for the iteration index.
					-->
					<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'results'">
						<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
							<label class="cell" for="nameInput${this.index}">Name:</label>
							<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="ref: 'First'"></input>
							<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext('${this.index}');}">Details</button>
						</div>
					</div>
					<div class="spacer"></div>

					<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'results'">
						<div id="detailsBanner">Details for selected index:</div>

						<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
							<div class="row">
								<label class="cell" for="firstInput">First Name:</label>
								<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"></input>
							</div>
							<div class="row">
								<label class="cell" for="lastInput">Last Name:</label>
								<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
							</div>
							<div class="row">
								<label class="cell" for="locationInput">Location:</label>
								<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"></input>
							</div>
							<div class="row">
								<label class="cell" for="officeInput">Office:</label>
								<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"></input>
							</div>
							<div class="row">
								<label class="cell" for="emailInput">Email:</label>
								<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Email'"></input>
							</div>
							<div class="row">
								<label class="cell" for="telInput">Telephone:</label>
								<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"></input>
							</div>
							<div class="row">
								<label class="cell" for="faxInput">Fax:</label>
								<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"></input>
							</div>
							<div class="row">
							<div class="spacer"></div>
								<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results[selectedIndex].toPlainObject());results[selectedIndex].commit();}">Save Item</button>        
								<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(results.toPlainObject());results.commit();;}">Commit All</button>        
								<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){results.reset();}">Reset to last saved</button>        
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
    </body>
</html>
